<template>
  <!-- 断层分布图、地震构造图结果查看 -->
  <el-dialog v-model="open" @close="cancelResult" width="800px" @open="initOpen" :close-on-click-modal="false">
    <template #title>
      <svg-icon icon-class="list"></svg-icon>
      <span style="padding: 0 10px">{{ title }}结果查看</span>
    </template>
    <template #default>
      <ImagePreview :src="src" />
    </template>
    <template #footer>
      <div style="text-align: right;" v-if="remind">
        <el-button type="primary" @click="cancelResult">确认</el-button>
      </div>
      <div style="text-align: right;" v-else>
        <el-button plain @click="cancelResult">取消</el-button>
        <el-button type="primary" @click="cancelResult">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
const props = defineProps({
  open: Boolean,
  title: String,
  attachId: String,
  remind: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:open'])
const attachId = ref('')
const src = computed(() => {
  if(props.attachId) {
    return `/attachment/downLoadFile?attachId=${props.attachId}`
  }else{
    return ''
  }
})

const initOpen = () => {
  attachId.value = props.attachId
}
const cancelResult = () => {
  emits('update:open', false)
  attachId.value = ''
}
</script>

<style lang="scss">
.el-dialog__header {
  text-align: left;
}

.el-dialog__footer {

  .el-button {
    &>span {
      border-bottom: none;
      color: unset;
      font-size: unset;
      width: unset;
      height: unset;
    }
  }
}
</style>
<style lang="scss" scoped>
.el-dialog__header {

  &>span {
    color: #6a798d;
    width: auto;
    font-size: 18px;
    border-bottom: none;
    line-height: unset;
    height: unset;
  }
}

.preview-image {
  width: 100%;
  height: 100%;
}

.el-image {
  width: 100%;
  min-height: 200px;

  :deep(img) {
    width: 100%;
    height: 100%;
    margin-top: 0;
    padding: 0;
  }
}
</style>